<template>
    <el-card class="box-card" width="100%">
      <div slot="header" class="clearfix">
        <span>模型成员</span>
        <el-button style="float: right; padding: 1px 0; height: 35px; width: 55px" type="primary" @click="goBack()">返回</el-button>
      </div>
      <div class="text item">
        <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="授权id"
        width="300">
      </el-table-column>
      <el-table-column
        prop="email"
        label="用户"
        width="200">
      </el-table-column>
      <el-table-column
        prop="create_date"
        label="授权日期"
        width="300">
      </el-table-column>
      <!-- <el-table-column
        prop="creator"
        label="创建者"
        width="250">
      </el-table-column> -->
      <el-table-column label="角色">
        <template slot-scope="scope">
          <el-select v-model="scope.row.role" placeholder="" @change="editModelMemberRole(scope.row.model_id, scope.row.email, scope.row.role)">
          <el-option
          v-for="item in grantRoles"
          :key="item.role"
          :label="item.name"
          :value="item.role">
          </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="操作">
      <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="删除" placement="top">
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteModelGrantProcess(scope.row.model_id, scope.row.id)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</el-card>
</template>
<style scoped>
  .text {
    font-size: 16px;
    text-align: left
  }

  .item {
    margin-left: 1px;
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }

  .el-card__header {
    padding: 18px 20px;
    background-color: rgb(238, 241, 246);
  }
</style>
<script>
import { getModelMemberList, grantModel, deleteModelGrant } from '@/api/request/model'
// import store from '@/store/store'
export default {
//   props: ['title'],
  data () {
    return {
      tableData: null,
      grantRoles: [
        {
          name: '创建者',
          role: 0
        },
        {
          name: '管理者',
          role: 1
        },
        {
          name: '编辑者',
          role: 2
        },
        {
          name: '使用者',
          role: 3
        }
      ]
    }
  },
  methods: {
    update () {
      this.tableData = null
      getModelMemberList({model_id: this.$route.query.model_id}).then(response => {
        this.tableData = response
      })
    },
    goBack () {
      this.$router.go(-1)
    },
    editModelMemberRole (modelID, email, role) {
      grantModel({model_id: modelID, email: email, role: role}).then(response => {
        // this.update()
      })
    },
    deleteModelGrantProcess (modelID, grantID) {
      deleteModelGrant({model_id: modelID, grant_id: grantID}).then(response => {
        this.update()
      })
    }
  },
  activated () {
    this.update()
  }
}
</script>
